<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-v-for遍历业主列表plus.html</title>
    <script src="js/vue.js"></script>
    <style>

        .pic{
            height: 40px;
            border-radius: 50%;
        }

    </style>
</head>
<body>

<!--
    v-for 标签 是 循环标签
      v-for="(数组中的元素,index) in 数组"
          {{表达式 展示元素的值 }}
-->
<div id="app">
    <table border="1" cellspacing="0">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>头像</td>
            <td>地址</td>
            <td>操作</td>
        </tr>
        <tr v-for="(user,index) in users">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>

            <td>
                <div v-if="user.sex == 1">
                    男
                </div>
                <div v-else>
                    女
                </div>
            </td>

            <td align="center">
                <img class="pic" :src="user.pic">
            </td>

            <td>{{user.address}}</td>
            <td>
                <button>修改</button>
                <button @click="delUser(index)">删除</button>
            </td>
        </tr>

    </table>

    <div>
        编号:<input type="text" v-model="user.id"> <br>
        性别:<input name="sex" type="radio" value="1" v-model="user.sex">男
        <input name="sex" type="radio" value="0" v-model="user.sex">女 <br>
        姓名:<input type="text" v-model="user.name"> <br>
        地址:<input type="text" v-model="user.address"> <br>
        <button @click="addUser"> 添加 用户信息 </button>
    </div>

</div>
<!--
      01、画页面  (数据可以写死)
      02、vue 中准备数据
      03  展示 数据到view中

      加添业务:
         1、业务中 有 性别、有图片

         2、业务中 列表中添加数据
               01 有表单提交数据
               02 有事件把数据添加到  users 中

         3、业务中 列表中删除数据
               1、添加操作按钮
               2、拿到要删除的数据
               3、users中删除数据
-->
<script>
    new Vue({
        el: "#app",
        data: {
            users:[
                {
                    id:"01",
                    sex:"1",
                    name:"马云",
                    pic:"https://img1.baidu.com/it/u=1877499004,3102182402&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
                    address:"杭州"
                },
                {
                    id:"02",
                    sex:"0",
                    name:"马化腾",
                    pic:"https://img1.baidu.com/it/u=1877499004,3102182402&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
                    address:"深圳"
                },
                {
                    id:"03",
                    sex:"1",
                    name:"雷军",
                    pic:"https://img1.baidu.com/it/u=1877499004,3102182402&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
                    address:"北京"
                }
            ],
            user:{
                pic:"https://img1.baidu.com/it/u=1877499004,3102182402&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
            }
        },
        methods:{
            addUser(){
                //js 中 如何 往数组中添加数据
                this.users.push(this.user)
                //添加成功后 把 表单清空
                this.user = {
                    pic:"https://img1.baidu.com/it/u=1877499004,3102182402&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
                }
            },
            delUser(index){
                //拿到 要删除的数据
                console.log(this.users[index]);
                // splice 数组中删除 或者添加的函数
                //   参数1 删除位置下标
                //   参数2 删除几个数据
                this.users.splice(index,1);
            }
        }
    })
</script>

</body>
</html>